<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>添加和删除文本</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="./css/3-5.css" rel="stylesheet">
<script type="text/javascript" src="../jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(function() {
        // $('input:text:first').focus(); //把焦点放在第一个文本框
        var ul = $('#todo-list');
        var text = $('#text');
        var select_all = $('#select-all');
        var todos = [];
        var selected_todo = [];

        function update_footer() {
            var checked_count = $('input[name="item"]:checked').length;
            $('#stats').text('完成' + checked_count + '项');
            $('#clear-all').text('清除已完成的' + checked_count + '个项目');
        }

        function get_todo() {
            if (localStorage.getItem('todos')) {
                todos = JSON.parse(localStorage.getItem('todos'));
            }
            return todos;
        }

        function add_todo(content) {
            var todos = get_todo();
            todos.push(content);
            localStorage.setItem('todos', JSON.stringify(todos));
            return todos.length-1;
        }

        function edit_todo(id, content) {
            var todos = get_todo();
            todos[id] = content;
            localStorage.setItem('todos', JSON.stringify(todos));
        }

        function clear_todo() {
            if (!selected_todo.length) { return; }
            var todos = get_todo();
            console.log(selected_todo);
            console.log(todos);
            todos = [];
            for (var i=0; i<selected_todo.length; i++) {
                console.log('删除: ' + todos[selected_todo[i]]);
                delete todos[selected_todo[i]];
            }
            console.log(todos);
            localStorage.setItem('todos', JSON.stringify(todos));
        }

        function create_todo(event, content, id) {
            if (event) {
                event.preventDefault();
            }

            var li = $('<li><div class="view"><input type="checkbox" name="item"><label></label></div></li>');

            // 显示隐藏的元素
            $('#label-all, #footer').show();

            // 添加新项目到ul
            var todo_id = 'todo-' + id;
            li.find('input:checkbox').attr('id', todo_id).end()
                .find('label').attr('for', todo_id).text(content);

            // 单个TODO单击时,切换完成状态,并更新计数
            li.find('input[type=checkbox]').change(function(event) {
                // 更新li的样式
                var checkbox = $(this);
                if (checkbox.attr('checked')) {
                    checkbox.next('label').attr('class','selected');
                    selected_todo.push(id);
                } else {
                    checkbox.next('label').removeAttr('class');
                    var new_selected_todo = [];
                    for (var i=0; i<selected_todo.length; i++) {
                        if (id !== selected_todo[i]) {
                            new_selected_todo.push(selected_todo[i]);
                        }
                    }
                    selected_todo = new_selected_todo;
                }

                console.log(selected_todo);

                if (ul.find('input:checkbox:not(:checked)').length === 0) {
                    select_all.attr('checked', true);
                } else {
                    select_all.attr('checked', false);
                }

                update_footer();

            });

            li.find('label').dblclick(function() {
                var form = $('<form><input type="text" class="edit"/></form>');
                var label = $(this);

                label.parents('li').append(form);
                label.parents('li').find('div').hide();
                form.find('input').val(label.text()).focus();
                form.submit(function(event) {
                    event.preventDefault();
                    label.text(form.find('input').val());
                    label.parents('li').find('div').show();
                    form.remove();
                    edit_todo(id, form.find('input').val());
                })
            });

            li.hide().prependTo(ul);
            li.fadeIn(500);

            // 添加之后将输入框的内容清空
            text.val('');

        }

        $('form').submit(function (event) {
            var content = text.val();
            var id = add_todo(content);
            create_todo(event, content, id);
        });

        // 选中全部或取消全部
        $('#select-all').change(function() {
            var checkboxes = $('input[name="item"]').attr('checked', this.checked);
            if (this.checked) {
                checkboxes.next('label').addClass('selected');
            } else {
                checkboxes.next('label').removeClass('selected');
            }
            update_footer();
        });

        $('#clear-all').click(function() {
            clear_todo();
            ul.find('input:checked').parents('li').fadeOut(300, function() {
                $(this).remove();
                update_footer();
            });
            select_all.attr('checked', false);
        });

        // 创建所有因存在的todo的dom节点
        var old_todos = get_todo();
        for (var i = 0; i < old_todos.length; i++) {
            create_todo(null, old_todos[i], i);
        }

    })
</script>
</head>
<body>
    <div id="content">
        <h2>待办事项</h2>
        <form action="">
            <input type="text" id="text" size="40" maxlength="50" placeholder="还有什么事没有做?" autofocus required autocomplete="off">
            <button type="submit" id="submit"></button><br/>
        </form>

        <label id="label-all">
            <input type="checkbox" name="select-all" id="select-all" value="all">全部选中
        </label>

        <ul id="todo-list"></ul>

        <div id="footer">
            <span id="stats">完成0项</span>
            <span id="clear-all">清除已完成的0个项目</span>
        </div>
    </div>
</body>
</html>
